<template>
  <div class="welcomePage">
    <div class="img">
      <img src="static/images/detail/welcome3x.png" alt="">
    </div>
    <div class="welcomeWord">
      <div>欢迎您回到我们的大家庭!</div>
      <div>望您用严谨的态度工作,用宽怀的心态待同事</div>
    </div>
      <button class="browse" @click="lookArticle">查看文章资讯</button>
  </div>
</template>

<script>
export default {
  name: "Welcome",
  methods:{
    //点击查看文章资讯按钮跳转到文章资讯页面
    lookArticle(){
      this.$router.push('/article')
    },
    //点击后退按钮回到login页面
    goToLogin(){
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.welcomePage{
  margin: 0 10px;
  //background-color: lightblue;
  .goBack{
    width: 355px;
    height: 40px;
    //background-color: lavenderblush;
    display: flex;
    //justify-content: center;//块元素x方向居中对齐
    align-items: center;//块元素x方向左对齐,上下居中
    img{
      width: 28px;
      height: 28px;
      border: 1px gray dashed;
    }
  }
  .img{
    width: 140px;
    height: 140px;
    background-color: lavender;
    margin:50px auto 0 auto;
    //display: flex;
    //justify-content: center;//块元素x方向居中对齐
    ////align-items: center;//块元素x方向左对齐,上下居中
    img{
      width: 140px;
      height: 140px;
      border: 1px gray dashed;
    }
  }
  .welcomeWord{
    width: 355px;
    height: 60px;
    background-color: cornsilk;
    margin-top: 30px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #233982;
  }
  button{
    width: 305px;
    height: 50px;
    color: white;
    background-color: #233982;
    margin:50px auto 0 25px ;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    border: 0;
  }
}
</style>
